<template>
  <view class="top">
    <view 
      v-for="(item, index) in data" 
      :key="index"
      @click="handleTabClick(index)"
      :class="{ 'active': activeIndex === index }"
    >
      {{ item.name }}
    </view>
  </view>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['tab-change']); // 定义自定义事件
const activeIndex = ref(0); // 当前激活的tab索引

const data = ref([
  { name: '溯源信息', value: 'traceability' },
  { name: '健康信息', value: 'healthy' },
  { name: '检疫信息', value: 'quarantine' },
  { name: '疫苗信息', value: 'vaccine' },
  { name: '繁殖信息', value: 'reproduction' },
]);

const handleTabClick = (index) => {
  activeIndex.value = index;
  emit('tab-change', data.value[index].value); // 触发事件并传递value值
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.active {
  color: #00C657; /* 激活状态颜色 */
  font-weight: bold;
  border-bottom: 2px solid #00C657; /* 底部边框 */
}
</style>